import AccessibilitySection from '../../docs-components/AccessibilitySection';
import docGen, { DocGen } from '../../docs-components/docgen';
import GeneratedPropTable from '../../docs-components/GeneratedPropTable';
import LocalizationSection from '../../docs-components/LocalizationSection';
import MainSection from '../../docs-components/MainSection';
import Page from '../../docs-components/Page';
import PageHeader from '../../docs-components/PageHeader';
import QualityChecklist from '../../docs-components/QualityChecklist';
import SandpackExample from '../../docs-components/SandpackExample';
import bareBannerSlimExample from '../../examples/bannerslim/bareBannerSlimExample';
import compactBannerSlimExample from '../../examples/bannerslim/compactBannerSlimExample';
import dismissableExample from '../../examples/bannerslim/dismissableExample';
import dontCombineWithBannerCallout from '../../examples/bannerslim/dontCombineWithBannerCallout';
import dontUseAsBannerCallout from '../../examples/bannerslim/dontUseAsBannerCallout';
import dontUseAsToast from '../../examples/bannerslim/dontUseAsToast';
import dontUseForDenseInterfaces from '../../examples/bannerslim/dontUseForDenseInterfaces';
import localizationLabels from '../../examples/bannerslim/localizationLabels';
import main from '../../examples/bannerslim/main';
import messagePropExample from '../../examples/bannerslim/messagePropExample';
import oneBannerSlimPerSection from '../../examples/bannerslim/oneBannerSlimPerSection';
import placeNearMostRelatedElement from '../../examples/bannerslim/placeNearMostRelatedElement';
import primaryActionExample from '../../examples/bannerslim/primaryActionExample';
import responsiveExample from '../../examples/bannerslim/responsiveExample';
import systemMessagesExample from '../../examples/bannerslim/systemMessagesExample';
import variantError from '../../examples/bannerslim/variantError';
import variantInfo from '../../examples/bannerslim/variantInfo';
import variantNeutral from '../../examples/bannerslim/variantNeutral';
import variantRecommendation from '../../examples/bannerslim/variantRecommendation';
import variantSuccess from '../../examples/bannerslim/variantSuccess';
import variantWarning from '../../examples/bannerslim/variantWarning';

export default function BannerSlimPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
  return (
    <Page title={generatedDocGen?.displayName}>
      <PageHeader description={generatedDocGen?.description} name={generatedDocGen?.displayName}>
        <SandpackExample
          code={main}
          hideEditor
          name={`Main ${generatedDocGen?.displayName} example`}
          previewHeight={200}
        />
      </PageHeader>

      <GeneratedPropTable generatedDocGen={generatedDocGen} />

      <MainSection name="Usage guidelines">
        <MainSection.Subsection columns={2}>
          <MainSection.Card
            cardSize="md"
            description={`
- When displaying section-level information to the user.
- When providing persistent messaging/guidance for specific elements or areas within a surface or page.
- When providing messaging/guidance on information-dense screens where there is limited space.
        `}
            title="When to use"
            type="do"
          />
          <MainSection.Card
            cardSize="md"
            description={`
- When displaying information that pertains to the whole page and is of the highest priority. Use [BannerCallout](/web/bannercallout) instead.
- When interacting with the BannerSlim is required for the user to proceed with a task or flow. Use [Modal](/web/modal) instead.
- When describing the function of an interactive element that doesn’t have a text label. Use [Tooltip](/web/tooltip) instead.
- When calling a users attention to a feature for the first time. Use [Popover](/web/popover) instead.
        `}
            title="When not to use"
            type="don't"
          />
        </MainSection.Subsection>
      </MainSection>

      <MainSection name="Best practices">
        <MainSection.Subsection columns={1}>
          <MainSection.Card
            cardSize="lg"
            description="Use for messages generated by the system that stay persistent on a surface"
            sandpackExample={
              <SandpackExample
                code={systemMessagesExample}
                hideEditor
                layout="column"
                name="Do - Use for system messages"
                previewHeight={200}
              />
            }
            type="do"
          />
          <MainSection.Card
            cardSize="lg"
            description={`
Use for messages generated as an immediate response to user interaction. Instead, use [Toast]/toast) for ephemeral messages, and [Modal](/web/modal) for a message that remains on the screen until it’s dismissed by a user.`}
            sandpackExample={
              <SandpackExample
                code={dontUseAsToast}
                hideControls
                hideEditor
                layout="column"
                name="Don't - Use BannerSlim as immediate response to user interaction"
                previewHeight={200}
              />
            }
            type="don't"
          />
        </MainSection.Subsection>

        <MainSection.Subsection columns={1}>
          <MainSection.Card
            cardSize="lg"
            description="Place BannerSlim near elements of a section that it most relates to"
            sandpackExample={
              <SandpackExample
                code={placeNearMostRelatedElement}
                hideEditor
                layout="column"
                name="Do - Place BannerSlim near most related element"
                previewHeight={760}
              />
            }
            type="do"
          />
          <MainSection.Card
            cardSize="lg"
            description={`
Place BannerSlim at the top of a page and use them for highest-priority messaging. Use [BannerCallout](/web/bannercallout) instead`}
            sandpackExample={
              <SandpackExample
                code={dontUseAsBannerCallout}
                hideControls
                hideEditor
                layout="column"
                name="Don't - Use BannerSlim for highest-priority messaging"
                previewHeight={200}
              />
            }
            type="don't"
          />
        </MainSection.Subsection>
        <MainSection.Subsection columns={1}>
          <MainSection.Card
            cardSize="lg"
            description={`Use "bare" BannerSlims for dense interfaces where space is an issue.`}
            sandpackExample={
              <SandpackExample
                code={bareBannerSlimExample}
                hideEditor
                layout="column"
                name="Do - Use 'bare' BannerSlims for dense interfaces"
                previewHeight={404}
              />
            }
            type="do"
          />
          <MainSection.Card
            cardSize="lg"
            description={`
Use a regular BannerSlim with a background for dense interfaces where space is an issue.`}
            sandpackExample={
              <SandpackExample
                code={dontUseForDenseInterfaces}
                hideControls
                hideEditor
                layout="column"
                name="Don't - Use a regular BannerSlim for dense interfaces"
                previewHeight={432}
              />
            }
            type="don't"
          />
        </MainSection.Subsection>
        <MainSection.Subsection columns={1}>
          <MainSection.Card
            cardSize="lg"
            description="Strive for using one BannerSlim per section instead of stacking. If BannerSlim must stack, errors and warnings take precedence."
            sandpackExample={
              <SandpackExample
                code={oneBannerSlimPerSection}
                hideEditor
                layout="column"
                name="Do - Strive for using one BannerSlim per section instead of stacking"
                previewHeight={200}
              />
            }
            type="do"
          />
          <MainSection.Card
            cardSize="lg"
            description={`
Combine BannerSlims with other components like [BannerCallouts](/web/bannercallout) or [BannerUpsells](/web/bannerupsell).`}
            sandpackExample={
              <SandpackExample
                code={dontCombineWithBannerCallout}
                hideControls
                hideEditor
                layout="column"
                name="Don't - Combine BannerSlims with BannerCallouts or BannerUpsells"
                previewHeight={440}
              />
            }
            type="don't"
          />
        </MainSection.Subsection>
      </MainSection>

      <AccessibilitySection name={generatedDocGen?.displayName}>
        <MainSection.Subsection
          description={`\`iconAccessibilityLabel\` requires a short, descriptive label for screen readers. This label should communicate the intent of the icon, such as "Success", “Error”, “Info” or “Warning”. Also, if using \`dismissButton\` or \`primaryAction\`, their respective \`accessibilityLabel\`s must be used. All labels should be localized.`}
          title="Labels"
        />
      </AccessibilitySection>

      <LocalizationSection
        code={localizationLabels}
        name={generatedDocGen?.displayName}
        notes={`Note that \`iconAccessibilityLabel\` is optional as DefaultLabelProvider provides default strings. \`accessibilityDismissButtonLabel\` is provided by default. Use custom labels if they need to be more specific.`}
      />

      <MainSection name="Variants">
        <MainSection.Subsection
          description={`Neutral BannerSlims are intended for Pinner interfaces where Pins and Boards take precedent or where we want to limit the use of color in the design.
`}
          title="Neutral"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={variantNeutral}
                layout="column"
                name="Neutral BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description="Info BannerSlims communicate helpful messages or guidance to users about a feature or section."
          title="Info"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample code={variantInfo} layout="column" name="Info BannerSlim example" />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description="Recommendation BannerSlims inform people of quick things they can do to improve their experience."
          title="Recommendation"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={variantRecommendation}
                layout="column"
                name="Recommendation BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description="Success BannerSlims communicate confirmation regarding an action within a larger flow."
          title="Success"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={variantSuccess}
                layout="column"
                name="Success BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description="Warning BannerSlims communicate cautionary messages to users. The BannerSlim should provide clear guidance on how to correct an issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to."
          title="Warning"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={variantWarning}
                layout="column"
                name="Warning BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description={`Error BannerSlims inform users of problems that require immediate action to correct. Further actions on the page might be blocked if users don't correct the problems. The BannerSlim should also provide clear guidance on how to correct the issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to.`}
          title="Error"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={variantError}
                layout="column"
                name="Error BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description="For dense interfaces and placement inline, next to blocks of text, set BannerSlim to its compact type: “infoBare”, “successBare”, “warningBare”, “errorBare”, “recommendationBare“."
          title="Compact"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={compactBannerSlimExample}
                layout="column"
                name="Compact BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>
        <MainSection.Subsection
          description={`
The \`message\` prop accepts either a string or [Text](/web/text). Use a string for simple messages without any visual style. BannerSlim will handle the message style and adherence to design guidelines. If a message with more complex style is required, such as bold text or inline links, use Text to wrap your message with any additional Text or Link usages contained within.

The BannerSlim \`message\` string can be complemented with a \`helperLink\`. When passing a Text component, \`helperLink\` isn't rendered to prevent unnecessary visual load.

Due to localization constraints, the contents of \`message\` and \`helperLink\` cannot belong to the same sentence. They must be independent sentences separated by a period. Don't attempt to construct a compound sentence using \`message\` and \`helperLink\`.
`}
          title="Message"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={messagePropExample}
                layout="column"
                name="BannerSlim 'message' prop example"
              />
            }
          />
        </MainSection.Subsection>

        <MainSection.Subsection
          description={`
BannerSlims can have a primary action. This action can be a [Link](/web/link), by specifying the \`href\` property, or a [Button](/web/button), when no \`href\` is supplied.

BannerSlim actions with link interaction can be paired with GlobalEventsHandlerProvider. See [GlobalEventsHandlerProvider](/web/utilities/globaleventshandlerprovider#Link-handlers) to learn more about link navigation.

For example, “Learn more” may link to a separate documentation site, while “Apply now” could be a button that opens a [Modal](/web/modal) with an application flow. Be sure to localize the labels of the actions.

If needed, actions can become disabled after clicking by setting \`disabled: true\` in the action data.

Note that actions are not available on compact ("___Bare" type) BannerSlims.
          `}
          title="Primary action"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={primaryActionExample}
                layout="column"
                name="BannerSlim primary action example"
              />
            }
          />
        </MainSection.Subsection>

        <MainSection.Subsection
          description={`
          \`dismissButton\` can be used when BannerSlim doesn't indicate a persistent state. This will most commonly be used in \`type="info"\` BannerSlims.

        Don't use dismiss buttons in the following cases:
        - There is a persistent account or page status that the user must address.
        - The user must access BannerSlim's information again in order to perform a task.

        Note that compact ("___Bare" type) BannerSlims are not dismissible.
          `}
          title="Dismissible"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={dismissableExample}
                layout="column"
                name="Dismissable BannerSlim example"
              />
            }
          />
        </MainSection.Subsection>

        <MainSection.Subsection
          description={`
BannerSlim is responsive to different [viewport breakpoints](/foundations/screen_sizes#Web-(px)).

Therefore, BannerSlim behavior relies on the window size and requires BannerSlim to be used on a full-window width to correctly respond to different breakpoints.

BannerSlim doesn't depend on DeviceTypeProvider to display a mobile view; instead, it adjusts to the smallest viewport breakpoint. The example below forces a mobile viewport width to render BannerSlim at that particular viewport.
          `}
          title="Responsive"
        >
          <MainSection.Card
            cardSize="lg"
            sandpackExample={
              <SandpackExample
                code={responsiveExample}
                layout="mobileRow"
                name="BannerSlim responsive example"
              />
            }
          />
        </MainSection.Subsection>
      </MainSection>

      <MainSection name="Writing">
        <MainSection.Subsection columns={2}>
          <MainSection.Card
            cardSize="md"
            description={`
- Use succinct and scannable language that clearly conveys information to the user without being overly clever or technical
- Consider internationalization and how other languages may be constrained
`}
            type="do"
          />
          <MainSection.Card
            cardSize="md"
            description={`
- Write messages that are wordy and take up a lot of space
- For warnings and errors, exclamation points if the tone isn’t celebratory, for example: “Update your account!”
`}
            type="don't"
          />
        </MainSection.Subsection>
      </MainSection>

      <QualityChecklist component={generatedDocGen?.displayName} />

      <MainSection name="Related">
        <MainSection.Subsection
          description={`
**[BannerUpsell](/web/bannerupsell)**
An BannerUpsell is used to market new features or to encourage a user to try recommendations.

**[BannerCallout](/web/bannercallout)** 
BannerCallouts are used at the top-most level of a page to communicate highest-priority information that applies to the entire page or surface. BannerCallouts can be dismissed and are also actionable.

**[Toast](/web/toast)**
Toast provides feedback shortly after a user interaction, like a confirmation that appears when a Pin has been saved. Unlike BannerUpsells and BannerSlims, toasts overlay Page content. They also automatically disappear after a certain amount of time without being dismissed by the user.

**[Tooltip](/web/tooltip)**
Tooltip provides helpful information regarding an interactive UI element, typically an IconButton. It is displayed on hover of a UI element, and disappears on mouse out.
    `}
        />
      </MainSection>
    </Page>
  );
}

export async function getServerSideProps(): Promise<{
  props: {
    generatedDocGen: DocGen;
  };
}> {
  return {
    props: { generatedDocGen: await docGen('BannerSlim') },
  };
}
